<template>
  <div class="navbar" flex>
    <!-- 展开 / 关闭侧边栏图标 -->
    <hamburger @toggleCollapse="toggleSidebar" :collapse="sidebar.opened" />
    <!-- 面包屑 -->
    <breadcrumb />
    <!-- 右侧布局 -->
    <div flex justify-end flex-1 items-center mr-20px>
      <!-- 全屏 -->
      <screenfull mx-5px />
      <!-- 更改 尺寸 -->
      <el-tooltip content="ChangeSize" placement="bottom">
        <size-select />
      </el-tooltip>
      <!-- 增加改变主题按钮的图标 -->
      <svg-icon
        icon-name="ant-design:setting-outlined"
        size-2em
        @click="openShowSetting"
      />
      <!-- 头像 -->
      <Avatar />
    </div>
  </div>
</template>

<style scoped lang="scss">
.navbar {
  @apply h-[var(--navbar-height)];
}
</style>

<script lang="ts" setup>
import { useAppStore } from "@/stores/app"
// 这里控制我们的收缩和展开
// 在解构的时候要考虑值是不是对象，如果非对象解构出来就 丧失响应式了
const { toggleSidebar, sidebar } = useAppStore()
// 泛型传入事件
const emit = defineEmits<{
  (
    // 事件名
    event: "showSetting",
    // 事件参数类型
    isShow: boolean
  ): void
}>()

const openShowSetting = () => {
  emit(
    // 事件名
    "showSetting",
    // 事件参数类型
    true
  )
}
</script>
